<template>
  <div class="secondfengmian">
    <div class="secondfengmianleft" ref="filebox" @click.stop="bumaopao">
      <input type="file" class="filechoose" ref="myfiles"  />
      <div class="centerbox" ref="fengmainbox1">
        <div>+ 菜谱封面</div>
        <div class="chicun">最佳尺寸：1280*1024</div>
      </div>
    </div>

    <div class="secondfengmianR">
      <div class="tjfenlei">推荐至分类</div>
      <input type="text" class="textinput" placeholder="添加" v-model="fenleida"/>
      <div class="texttishi">
        如：快手菜、早餐、汤羹、饼干、零食等，不建议输入食材名。(使用空格或逗号来分隔分类)
      </div>
      <div class="tongbu">同步</div>
      <div class="tiaozhuan">
        <a
          href="https://www.douban.com/service/auth2/auth?client_id=0fc01e964f12b3852f405bc2ed381a8f&response_type=code&redirect_uri=http%3A%2F%2Fwww.xiachufang.com%2Fsocial%2Fbind%2Fdouban%2F"
        >
          <span class="iconfont icon-checkbox douban">豆瓣网</span>
          <span class="bangding">点击绑定</span>
        </a>
      </div>
      <div class="tiaozhuan">
        <a
          href="https://api.weibo.com/oauth2/authorize?client_id=3629509893&response_type=code&redirect_uri=https%3A%2F%2Fwww.xiachufang.com%2Fsocial%2Fbind%2Fweibo%2F&with_offical_account=1###"
        >
          <span class="iconfont icon-checkbox douban">新浪微博</span>
          <span class="bangding">点击绑定</span>
        </a>
      </div>
      <div class="koukou">
        <input type="radio" checked />
        QQ空间
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filesdata:"",
      targetfiles:"",
      fenleida:"",
    };
  },
  methods:{
    bumaopao(){
      this.$refs.fengmainbox1.style.display = "none"
    }
  },
  watch:{
    fenleida(){
         this.$emit("update:value", this.fenleida);
    }
  },
  mounted(){
    // console.log(this.$refs.myfiles,44444);
    this.$refs.myfiles.onchange=(e)=>{
      console.log(e.target.files[0]);
      this.targetfiles=e.target.files[0];
      //  console.log(this.targetfiles);
       this.$emit("input",this.targetfiles)
      // console.log(this.fenleida);
      this.filesdata=window.URL.createObjectURL(e.target.files[0]);
      this.$refs.filebox.style.backgroundImage = `url(${this.filesdata})`
    }
  },

  components: {},
};
</script>

<style lang="scss" scoped>
.secondfengmian {
  width: 1000px;
  height: 500px;
  display: flex;
  justify-content: start;
  // background-color: wheat;
  margin-top: 16px;
}
.secondfengmianleft {
  width: 662px;
  height: 500px;
  position: relative;
  background-image: url("");
  background-size: 662px 500px;
  background-color: #f5f6f5;
  color: #505050;
}
.secondfengmianR {
  width: 300px;
  height: 60%;
  // background-color: grey;
  margin-left: 10px;
}
.tjfenlei {
  width: 300px;
  height: 40px;
  font-size: 20px;
  font-weight: bolder;
  line-height: 40px;
  padding-left: 12px;
  margin-bottom: 22px;
  color: #c0ae81;
}
.centerbox {
  width: 130px;
  height: 40px;
  margin: 0 auto;
  position: absolute;
  top: 220px;
  left: 300px;
  display: block;
}
.chicun {
  width: 230px;
  margin-left: -20px;
  height: 40px;
}
.tongbu {
  width: 300px;
  height: 40px;
  font-size: 20px;
  font-weight: bolder;
  line-height: 40px;
  padding-left: 12px;
  margin-top: 13px;
  color: #c0ae81;
}
.textinput {
  width: 270px;
  height: 37px;
  margin: 0 auto;
}
.texttishi {
  width: 300px;
  height: 50px;
  margin-top: 12px;
  color: #ad9090;
}
.tiaozhuan {
  width: 112%;
  height: 50px;
  // background-color: indianred;
}
.douban {
  display: inline-block;
  width: 90px;
  height: 40px;
  margin-left: 14px;
  line-height: 40px;
  color: #ad9090;
  margin-right: 162px;
}
.bangding {
  color: #dd3915;
}
.koukou {
  width: 80px;
  height: 40px;
  margin-left: 14px;
  color: #222222;
  margin-top: 10px;
}
.filechoose {
  width: 662px;
  height: 500px;
  opacity: 0;
}
</style>
